<template>
    <div class="app-container">
        <CommonContainer title="报单人信息">
            <el-descriptions>
                <el-descriptions-item label="报单人">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="报单人联系电话">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="所属组织">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="城市">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="区域">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="经销商">大撒大声地</el-descriptions-item>
            </el-descriptions>
        </CommonContainer>
        <CommonContainer title="客户信息">
            <el-descriptions>
                <el-descriptions-item label="客户名称">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="客户类型">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="客户等级">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="客户属性">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="客户标签">大撒大声地</el-descriptions-item>
            </el-descriptions>
        </CommonContainer>
        <CommonContainer title="订单信息">
            <el-descriptions>
                <el-descriptions-item label="额度申请">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="业务类型">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="产品方案">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="线索来源">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="租赁用途">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="租金支付方式">大撒大声地</el-descriptions-item>
                <el-descriptions-item label="申请总台数">大撒大声地</el-descriptions-item>
            </el-descriptions>
        </CommonContainer>
        <CommonContainer title="免信审结果">
            <div>
                <el-descriptions>
                    <el-descriptions-item label="价审通过时间">{{ results.auditTime|filterNull }}</el-descriptions-item>
                </el-descriptions>

                <el-form label-width="120px">
                    <div style="margin-bottom: 20px">
                        <div class="flex-row-center">
                            <span class="quota">信审额度:</span>
                            <template v-if="results.displayType==1||results.displayType==2">
                                <span class="date">{{ results.creditReviewLimit || '--' }}</span>
                                <el-button v-if="results.displayType==1" type="primary" plain @click="voidRemainingBalance">作废剩余额度</el-button>
                            </template>
                            <template v-else>
                                <span class="date">{{ results.creditReviewLimit || '--' }}</span>
                                <template v-if="results.displayType==3">
                                    <span style="font-size: 14px;color: #8C8C8C">操作人:</span>
                                    <span class="date">{{ cancleOrderInfo.invalidOperator|filterNull }}</span>
                                    <el-button type="primary" plain @click="goVoidRemainingBalanceInfo">查看作废说明</el-button>
                                </template>
                            </template>
                        </div>

                        <div class="table-title-wrap flex-row-center" style="margin-top: 10px">
                            <p class="statisticInfo">申请总台数: <span>{{ results.totalApplicationNumber }}</span></p>
                            <p class="statisticInfo">通过总台数: <span>{{ results.totalPassNumber }}</span></p>
                            <p class="statisticInfo">拒绝总台数: <span>{{ results.totalRejectNumber }}</span></p>
                        </div>

                        <el-table
                            :data="detailInfo.cars"
                            :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                            <el-table-column
                                align="center"
                                prop="vehicleManufacturers"
                                label="车辆厂商"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleModel"
                                label="车辆车型"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleStyle"
                                label="车辆款型"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="carNo"
                                label="车牌号"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleEnergyType"
                                label="车辆能源类型"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="registrationNature"
                                label="登记性质"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="applicationType"
                                label="申请类型"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="leaseTerm"
                                label="租赁期限(月)"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="rentPaymentMethod"
                                label="租金支付方式"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="mileageLimit"
                                label="里程限制（公里)"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="registeredCity"
                                label="上牌城市"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="registrationFee"
                                label="上牌费"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="insurancePremium"
                                label="保险费"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="maintenancePremium"
                                label="维保费"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="purchaseTax"
                                label="购置税"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleAndVesselTax"
                                label="车船税"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="installationCost"
                                label="加装费用"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="otherExpenses"
                                label="其他费用"
                                min-width="120">
                            </el-table-column>
                          <el-table-column
                              align="center"
                              prop="irr"
                              label="IRR（含牌照）"
                              min-width="120">
                            <template v-slot="{row}">
                              <template v-if="row.irr">{{row.irr}}%</template>
                              <template v-else>--</template>
                            </template>
                          </el-table-column>
                            <el-table-column
                                align="center"
                                prop="margin"
                                label="保证金"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="monthlyRent"
                                label="每期租金"
                                min-width="120">
                            </el-table-column>
                          <el-table-column label="首期租金、比例" align="center" prop="firstInstallmentRent" min-width="150px" show-overflow-tooltip>
                            <template v-slot="{row}">
                              <template v-if="row.firstInstallmentRentalRatio">
                                {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
                              </template>
                              <template v-else>
                                -- 、--
                              </template>

                            </template>
                          </el-table-column>
                          <el-table-column label="残值、比例" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip>
                            <template v-slot="{row}">
                              <template v-if="row.residualValueRatio">
                                {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
                              </template>
                              <template v-else>
                                -- 、--
                              </template>

                            </template>
                          </el-table-column>
                            <el-table-column
                                align="center"
                                prop="suggestedPrice"
                                label="厂商指导价"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="purchasePrice"
                                label="新车采购单价"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="currentValuation"
                                label="旧车当前估值"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="numberOfApplications"
                                label="申请台数"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="numberOfUnitsPassed"
                                label="通过台数"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="rejectedUnits"
                                label="拒绝台数"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="numberOfUnitsUsed"
                                label="已使用台数"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="numberOfInvalidUnits"
                                label="作废台数"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="numberOfFrozenUnits"
                                label="冻结台数"
                                min-width="120">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="numberOfFrozenUnits"
                                label="剩余可用台数"
                                min-width="120">
                              <template v-slot="{row}">
                                <span>{{ row.numberOfUnitsPassed - row.numberOfUnitsUsed -row.numberOfInvalidUnits -row.numberOfFrozenUnits}}</span>
                              </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="effectiveStatus"
                                label="通过台数状态"
                                min-width="120">
                                <template v-slot="{row}">
                                    <span>{{ row.effectiveStatus == 1 ? '生效中' : '已过期' }}</span>
                                </template>
                            </el-table-column>


                        </el-table>
                    </div>

                    <template v-if="needCreditReview==2">
                        <el-form-item label="说明:" prop="remark">
                            {{ results.remark|filterNull }}
                        </el-form-item>
                        <el-form-item label="附件:" class="form-img" style="margin-top: 40px">
                            <image-common disabled v-model="results.annex" :up-type="2"></image-common>
                        </el-form-item>
                    </template>
                </el-form>
                <void-remaining-balance ref="voidRemainingBalance"></void-remaining-balance>
                <void-remaining-balance-info ref="voidRemainingBalanceInfo"></void-remaining-balance-info>
            </div>
        </CommonContainer>

        <CommonContainer title="免信审规则">
            <el-table :data="creditRecordList" border>
                <template slot="empty">
                    <el-empty :image-size="50" description="暂无免信审规则"></el-empty>
                </template>
                <el-table-column
                    align="center"
                    prop="approvalStatus"
                    label="规则名称"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="submitTime"
                    label="产品方案"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="submitter"
                    label="业务类型"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="approvalStatus"
                    label="客户类型"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="approvalStatus"
                    label="租赁用途"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="approvalStatus"
                    label="客户标签"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="approvalStatus"
                    label="客户等级"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="approvalStatus"
                    label="客户属性"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="approvalStatus"
                    label="本次申请台数及历史批复台数"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="approvalStatus"
                    label="本次申请采购金额及历史批复金额"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="approvalStatus"
                    label="租期"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="approvalStatus"
                    label="创建时间"
                    min-width="120">
                </el-table-column>
            </el-table>
        </CommonContainer>
        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="back">返回</el-button>
        </div>
     <replenish-files ref="replenishFiles"></replenish-files>
    </div>
</template>

<script>

import ReplenishFiles from "@/views/letterReview/order/components/ReplenishFiles.vue";
import VoidRemainingBalanceInfo from "@/views/letterReview/letterReview/components/VoidRemainingBalanceInfo.vue";
import VoidRemainingBalance from "@/views/letterReview/letterReview/components/VoidRemainingBalance.vue";
import * as creditApplyApi from "@/api/letterReview/creditReviewApply"
import {getCrLimitDetails} from "@/api/letterReview/creditReviewApply";
export default {
    components: {VoidRemainingBalance, VoidRemainingBalanceInfo, ReplenishFiles},
    props: {},
    data() {
        return {
            creditRecordList:[1,2],
            needCreditReview:2,
            results:{displayType:3},
            applicationNo:'XS111202312250001',
            detailInfo:null,
        }
    },
    computed: {},
    methods: {
        //获取信审申请详情
        getDetailInfo(){
            creditApplyApi.getCrLimitDetails(this.$route.query.applicationNo).then(res=>{
                this.detailInfo = res.data;
            })
        },

        //作废剩余额度
        voidRemainingBalance() {
            this.$refs.voidRemainingBalance.show(this.applicationNo)
        },
        //查看作废信息
        goVoidRemainingBalanceInfo() {
            this.$refs.voidRemainingBalanceInfo.show()
        },
        // 查看信审资料
        goDetail(row){
            this._toPage({
                name:'OrderCreditFilesDetail',
                query:{
                    applicationNo:'XS111202312250001'
                }
            })
        },
        // 补充资料
        goAdditionalFiles(row){
            this.$refs.replenishFiles.show('111')
        },
        //返回
        back(){
            this.$router.back()
        }
    },
    mounted() {
        this.getDetailInfo()
    },

}
</script>

<style lang="scss" scoped>
.statisticInfo {
    color: #464646;
    font-size: 14px;
    margin-right: 10px;

    span {
        color: #1884FF;
    }
}

.quota {
    font-size: 14px;
    color: #8C8C8C;
    position: relative;
    left: 12px;
}

.date {
    font-size: 14px;
    margin: 0 20px;
}
</style>
